쇼핑몰 디자인 관리 한눈에 보기

쇼핑몰 메인 화면 구성

📌 쇼핑몰의 메인 화면은 두 가지 주요 영역으로 나뉘어 있습니다.

A - 메인 레이아웃 (중앙)

모바일 웹 또는 앱 화면과 유사한 구조로 구성된 주요 콘텐츠 영역으로,

상품 진열 및 메인 디자인이 반영되는 핵심 화면입니다.

B - 메인 PC화면 (좌/우측)

웹으로 접속할 시, 노출되는 디자인을 수정할 수 있는 영역입니다.

단, 메인 PC화면 설정은 웹에만 적용되며 모바일에는 노출되지 않는 점 참고 부탁드립니다.

A. 메인 레이아웃

1. 메인 최상단 배너

채널 추가 및 회원가입을 유도하여 비회원 고객이 회원으로 전환될 수 있도록 유입을 유도하는 기능의 배너 영역입니다.

메인 최상단 배너 등록

2. 상단 GNB

자주 사용하는 [로그인, 회원가입, 마이페이지, 주문배송, 장바구니] 메뉴가 노출되는 영역입니다.

3. 아이콘

쇼핑몰 내에서 아이콘의 모양과 노출할 아이콘을 변경할 수 있습니다.

메인 레이아웃의 네비게이션 메뉴는 최대 4개까지 설정하실 수 있으며 순서 변경이 가능합니다.

아이콘 설정

4. 쇼핑몰 로고

쇼핑몰 로고를 노출시킬 수 있는 영역입니다.

5. 상단 메뉴

메인 화면에서 지정한 URL로 이동할 수 있도록 설정하는 영역입니다.

상단 메뉴

6. 검색 영역

검색 영역은 대표 검색어를 통해 기본 검색 명칭 적용이 가능합니다.

검색 영역

7. 배너 영역

이벤트 광고 및 상품이나 특정 링크로 연결하고 노출 기간을 설정할 수 있습니다.

메인 배너 등록

8. 플로팅 액션 버튼 설정

화면 우측 하단에 고정으로 노출되는 버튼으로 상담하기, 친구 초대 리워드, 주문/배송 조회, 페이지 상단 이동 버튼이 노출됩니다.

플로팅 액션 버튼 설정

9. 추천상품 영역

카테고리와 관계없이 원하는 상품들을 자유롭게 묶어 진열할 수 있는 그룹입니다.

주로 메인 페이지에 노출되는 상품 혹은 메인 PC화면에서 좌·우측 영역에 노출할 수 있습니다.

추천상품 그룹 설정 방법

10. 상품그룹 영역

카테고리, 태그 등과 연동하여 상품을 진열할 수 있으며 메인 페이지에 노출시킬 수 있습니다.

11. 퀵 메뉴

메인 화면에서 원하는 카테고리로 이동할 수 있도록 설정하는 메뉴입니다.

퀵 메뉴

12. 구분선 및 여백

메인 레이아웃 내에서 영역을 구분하기 위한 기능입니다.

구분 선 및 여백 설정

13. 랭킹 영역

판매수량, 구매후기 등 다양한 기준에 따라 인기 상품을 순위별로 노출하고, 관리자 설정으로 랭킹 기준을 변경할 수 있는 영역입니다.

랭킹 영역

14. 카테고리 영역

등록된 모든 카테고리가 노출되며 카테고리 영역별로 일부 상품만 진열되는 기능입니다.

카테고리 영역

15. 구매후기 영역

사진이 포함된 구매후기를 한눈에 볼 수 있는 영역입니다.

구매후기 영역

16. 탭 상품 영역

상품을 카테고리, 태그, 타임 세일 혹은 관심이 갈만한 키워드로 묶어 탭으로 구성 가능한 영역입니다.

탭 상품 영역

17. 게시판

공지사항, 최신 업데이트, 진행 중인 이벤트 정보를 안내하여 고객이 쇼핑몰 소식을 더 쉽게 확인하고 참여할 수 있도록 돕는 기능입니다.

게시판 설정

18. 쇼핑몰 정보

쇼핑몰 정보 영역에 노출될 항목 명칭과 데이터 조합을 설정하는 기능으로,
좋아요 수·구매 수·회원 수 등 다양한 지표를 조합해 신뢰감 있는 쇼핑몰 정보를 표현할 수 있습니다.

19. 쇼핑몰 하단 안내

쇼핑몰 하단 안내 영역에서는 무통장입금 계좌 정보, 고객센터 운영 시간, 안내 이미지 클릭 시 이동 경로 등을 설정할 수 있으며, 이를 통해 고객이 필요한 정보를 쉽게 확인하고 편리하게 문의하거나 결제할 수 있도록 돕습니다.

고객센터 전화번호 수정 방법

20. 운영 정책

회사소개, 이용약관, 개인정보처리방침 등의 운영 정책과 고객 안내용 FAQ가 노출되는 영역입니다.

1. 회사소개

1. 이용약관 / 개인정보처리방침

1. FAQ

21. SNS 링크

쇼핑몰의 SNS 계정을 연동하여 광고 효과를 높일 수 있는 영역입니다.

임베드 영역

외부 콘텐츠 (유튜브 영상, SNS 게시물 등)를 메인 화면에 삽입하여 보여줄 수 있는 기능입니다.

임베드 영역 (인스타그램, 유튜브)

무제한 상품 진열

무제한 상품 진열을 ON으로 설정할 경우, 선택한 노출 상품 유형에 해당하는 상품이 수량 제한 없이 전체 진열됩니다.

B. 메인 PC화면

추천 상품 그룹에 등록된 상품을 메인에 노출할 수 있습니다.

메인 PC_내 좌측, 우측 추천상품 노출 방법

2. 브랜드 영역 설정

브랜드와 배너 이미지는 메인 좌측에 노출되며, 이동 URL로 해당 영역을 클릭할 시에 이동 시킬 페이지 설정이 가능합니다.

단, 배너 이미지의 경우 아래 [검색 영역 설정]이 ‘ON’일 시에 검색 영역이 보여지며, 배너 이미지는 노출되지 않으니 참고 바랍니다.

3. 검색 영역 설정

상품 검색 기능을 설정하는 영역으로, 고객이 원하는 상품을 빠르게 찾을 수 있도록 검색 영역을 구성할 수 있습니다.

추천 검색어 추가 및 수정은 [디자인관리 > 검색 관리]에서 가능합니다.

검색 관리

4. APP 다운로드 설정

앱을 사용 중인 경우에만 노출이 가능하며, 버튼 이미지를 등록하여 다운로드를 유도할 수 있습니다.

APP 제작 신청 및 진행 방법

5. 최근 본 상품 설정

최근 살펴본 상품이 노출되며 ON 처리 시 좌측 검색어 영역의 하단에서 확인이 가능합니다.

6. 배경 설정

홈페이지 전체 바탕 이미지를 적용할 수 있는 항목입니다.

7. 테두리 및 그림자 설정

메인 및 추천 상품 영역의 테두리와 그림자를 설정할 수 있는 항목입니다.

메인 PC_테두리 및 그림자 설정 방법

유튜브에서 더 많은 동영상을 확인해 보세요.  유튜브 채널 바로가기 >

2-10.플렉스지_메인 PC화면 설정 방법

2-6. 플렉스지_메인레이아웃 설정 방법